<template>
    <span style="position:relative">
        <input ref="input"
         class="my-input"
        :value="value"
         @input="inputEvent"
         />
        <span
            class="delete-icon"
            v-show="clearable && value !== ''"
            @click="closeEvent"
            >
            X
        </span>
    </span>
</template>
<script>
export default {
    name:"MyInput",
    props:{
        value:String,
           
            clearable:Boolean,
        },
    data(){
        return{

        };
    },
    methods:{
        inputEvent(event){
            this.$emit("input",event.target.value);
        
        },
        closeEvent(){
            this.$emit("input",'');
            this.$refs.input.focus();
        },
    },
};
</script>
<style scoped>
.my-input{
    width: 200px;
    height: 40px;
    outline: none;
    border: 1px solid #ccc;
    border-radius:5px;
    padding:0 10px;
    font-size: 14px;

}
.my-input:focus{
    border:1px solid #409eff;
}
.delete-icon{
    position: absolute;
    right: 10px;
    color:#999;
    cursor: pointer;
    top:50%;
    margin-top:-10.5px ;
}
.delete-icon:hover{
    color:#333;
}
</style>